<template>
  <view class="user pagebg">
    
      <!-- 用户头像部分 -->
      <view class="user-title">
              <view class="image-box">
                <image class="image" src="./images/头像.png" mode=""></image>
              </view>
              
              <view class="right">
                <view class="top-item">
                  <text class="top-text">小橙子</text>
                  <view class="vip">社区服务商</view>
                </view>
                  <view class="Ids">ID:011111</view>
              </view>
      </view>
      
      <!-- 头像下部分 -->
      <view class="user-header">
          <view class="box1">
            <text>320</text>
            <text>我的积分</text>
            <view class="box-right">|</view>
          </view>
          <view class="box1">
            <text>1000</text>
            <text>会员总数</text>
            <view class="box-right">|</view>
          </view>
          <view class="box1">
            <text>12</text>
            <text>成交单数</text>
          </view>
      </view>
      
      <!-- xia -->
      <view class="user-content">
        <view class="content-item">
          <!-- <image src="./images/分组_1.png" mode="" ></image> -->
          <image src="./images/分组_1.png" mode=""></image>
          <text>待付款</text>
        </view>
        <view class="content-item">
          <image src="./images/分组_2.png" mode=""></image>
          <text>待付款</text>
        </view>
        <view class="content-item">
          <image src="./images/分组_3.png" mode="" ></image>
          <text>待付款</text>
        </view>
        <view class="content-item">
          <image src="./images/画板_5.png" mode="scaleToFill" ></image>
          <text>待付款</text>
        </view>
      </view>
      
      
      <!-- --------------------------------------------- -->
      <view class="footer-index">
        <!-- '背景图片' -->
        <view class="footer-image"></view>
        
        <view class="fontsize">
          <text class="top">分享“油”赚</text>
          <text class="bottom">邀请会员获得收益-与平台共享收益</text>
        </view>
        
        <view class="box">前往邀请 ></view>
      </view>
      
      <!-- -------------------------- -->
      <view class="bottom-index">
           <view class="index-item">
             <image src="./images/我的客服.png" mode="scaleToFill" class="imageleft"></image>
             <text class="text">专属客服</text>
             <image src="../user/images/Vector.png" mode="scaleToFill" class="imageright"></image>
           </view>
           <view class="index-item">
             <image src="../user/images/Frame.png" mode="scaleToFill" class="imageleft"></image>
             <text class="text">发票助手</text>
             <image src="../user/images/Vector.png" mode="scaleToFill" class="imageright"></image>
           </view>
           <view class="index-item">
             <image src="./images/我的客服.png" mode="scaleToFill" class="imageleft"></image>
             <text class="text">我的收益</text>
             <image src="../user/images/Vector.png" mode="scaleToFill" class="imageright"></image>
           </view>
           <view class="index-item">
             <image src="../user/images/Frame.png" mode="scaleToFill" class="imageleft"></image>
             <text class="text">我的社群</text>
             <image src="../user/images/Vector.png" mode="scaleToFill" class="imageright"></image>
           </view>
      </view>
      
      
      <!-- 右上角设置 -->
      <view class="setting">
        <button class="button" @click="buttonSetting">12</button>
        <image class="image" src="./images/Settings.png" mode="scaleToFill"></image>
        <text class="text">设置</text>
      </view>
  </view>
</template>

<script setup>
  const buttonSetting=()=>{
    console.log('12');
    uni.navigateTo({
      url:"/pages/Setting/index"
    })
  }
</script>

  
<style scoped lang="scss">
  .user{
    position: relative;
    top: 10%;
    // 头像部分
      .user-title{
          position: absolute;
          top: 17%;
          padding: 0 68rpx;
          height: 166rpx;
          width: 100%;
          // background-color: red;
            .image-box{
              .image{
                display: inline-block;
                width: 166rpx;
                height: 166rpx;
                border-radius: 50%;
              }
            }
            .right{
              position: absolute;
              top: 0;
              left: 35%;
              width: 100%;
              .Ids{
                position: absolute;
                bottom: -150%;
                font-size: 32rpx;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);

              }
              .top-item{
                display: flex;
                .top-text{
                  font-size: 46rpx;
                  font-weight: 400;
                }
                .vip{
                  // width: 89rpx;
                  height: 50rpx;
                  opacity: 1;
                  border-radius: 5rpx;
                  background: rgba(236, 248, 255, 1);
                  text-align: center;
                  color: rgba(63, 167, 237, 1);
                  line-height: 45rpx;
                  margin-left: 22rpx;
                }
              }
            }
      }
      
        // 头像下部分
      .user-header{
        position: relative;
        top: 30%;
        margin: 0 15rpx;
        width: 721rpx;
        height: 153rpx;
        // background-color: #55ff7f;
        display: flex;
        
          .box1{
            width: 245rpx;
            
            height: 100%;
            // background-color: #55557f;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
                              .box-right{
                                position: absolute;
                                top: 40%;
                                margin-left: 35%;
                              }
            text{
              font-size: 36rpx;
              font-weight: 700;
              color: rgba(51, 51, 51, 1);
            }
            text:nth-child(1){
              margin-bottom: 9.5rpx;
            }
          }
      }
      
      
      // --------------
      .user-content{
        position: absolute;
        top: 40%;
        margin-top: 35rpx;
        margin: 0 15rpx;
        width: 721rpx;
        height: 153rpx;
        opacity: 1;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rpx 0rpx 23rpx  rgba(255, 147, 130, 0.3);
        display: flex;
        justify-content: space-around;
        align-items: center;
        
            .content-item{
              display: flex;
              flex-direction: column;
              align-items: center;
              image{
                width: 56rpx;
                height: 50rpx;
              }
              text{}
            }
      }
      
      /* ------------*/
      .footer-index{
        position: absolute;
        top: 49%;
        margin-top: 38rpx;
        left: 61rpx;
        width: 636rpx;
        height: 141rpx;
        opacity: 1;
        border-radius: 20rpx;
        background: rgba(254, 62, 78, 1);
        box-shadow: 0rpx 0rpx 21rpx  rgba(254, 62, 78, 0.3);
        .box{
          position: absolute;
          top: 50%;
          right: -8%;
          transform: translate(-50%,-50%);
          width: 157rpx;
          height: 54rpx;
          opacity: 1;
          border-radius: 27rpx;
          background: rgba(255, 248, 236, 1);
          
          font-size: 24rpx;
          font-weight: 400;
          letter-spacing: 0rpx;
          line-height: 54rpx;
          color: rgba(170, 43, 54, 1);
          text-align: center;
        }
        .fontsize{
          padding: 20rpx 61rpx;
          display: flex;
          flex-direction: column;
          .top{
            margin-left: 60rpx;
            margin-bottom: 10rpx;
            font-size: 36rpx;
            color: rgba(255, 243, 222, 1);
          }
          .bottom{
            font-size: 24rpx;
            color: rgba(255, 243, 222, 1);
          }
        }
        .footer-image{
          width: 100%;
          height: 500%;
          position: absolute;
          top:-122%;
          left: 50%;
          // background: url(./images/Group_1551.png) repeat;
          // background-position: center;
          // transform: rotate(84deg);
        }
      }
      // ---------------------
      .bottom-index{
        position: absolute;
        bottom: 2%;
        padding: 0 45rpx 50rpx 73rpx;
        // width: 570rpx;
        width: 100%;
        // background-color: #00ff00;
          .index-item{
            display: flex;
            align-items: center;
            margin-bottom: 50rpx;
            .imageleft{
              width: 52rpx;
              height: 52rpx;
            }
            .text{
              margin-left: 39.95rpx;
              font-size: 32rpx;
              font-weight: 700;
              letter-spacing: 0rpx;
              line-height: 38.4rpx;
              color: rgba(51, 51, 51, 1);
              text-align: center;
              vertical-align: middle;
            }
            .imageright{
              position: absolute;
              right: 100rpx;
              width: 19rpx;
              height: 34.1rpx;
            }
          }
      }
      
      
      // 设置
      .setting{
        position: absolute;
        top: 12%;
        left: 75%;
          width: 137rpx;
          height: 50rpx;
          opacity: 1;
          border-radius: 20rpx;
          background: rgba(247, 248, 250, 1);
          box-shadow: 0rpx 0rpx 32rpx  rgba(186, 203, 255, 0.4);
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          .image{
            width:34rpx;
            height: 34rpx;
          }
          .text{
            font-size: 24rpx;
            font-weight: 400;
            line-height: 50rpx;
            color: rgba(0, 0, 0, 1);
          }
          .button{
            position: absolute;
            left: 0;
            width: 137rpx;
            height: 50rpx;
            opacity:0;
          }
      }
  }
</style>